<template>
    <div class="paymentDetail" id="paymentDetail">
        <ul class="profess-List">
            <li class="profess-List-title">
                套餐名称：<input type="text" v-model="template.name" readonly /> 学年制：
                <input type="text" v-model="template.professionales_id" readonly /> 套餐总价：
                <input type="text" v-model="template.total_money" readonly />
            </li>
            <li class="profess-List-box">
                <ul style="color:black;">
                    <li>名称</li>
                    <li>单价（元）</li>
                </ul>
                <ul v-for="(item,index) in professList" :key="index" style="color:black;">
                    <li>{{item.charge_name}}</li>
                    <li>{{item.money}}</li>
                </ul>

            </li>
        </ul>

        <div class="btn-box" style="margin:25px auto; display: flex;justify-content: center;">
            <el-button @click="goCencal">返回</el-button>
        </div>

        <el-dialog :title="formEditTitle" :visible.sync="dialogFormVisible" class="popup-models">
            <el-form :model="form" :disabled="formEditDisabled">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="form.price" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDetail">保存</el-button>
                <el-button type="danger" @click="deleteDetail">删除</el-button>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        name: 'paymentDetail',
        data() {
            return {
                professList: [],
                template: '',
                formEditTitle: '修改信息',
                formEditDisabled: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {},
            }
        },
        beforeMount() {
            var self = this;
            self.template = JSON.parse(sessionStorage.getItem('template'));
            self.template.professionales_id == 3 ? self.template.professionales_id = '专科' : self.template.professionales_id = '本科';
        },
        mounted() {
            var self = this;
            this.getPayment();
        },
        methods: {
            goCencal() {
                var self = this;
                this.$router.back(-1);
            },
            getPayment() {
                /* 套餐列表 */
                var self = this;
                var params = {
                    id: self.template.id
                }
                apis.contApi.getProfessName(params).then((data) => {
                    console.info('套餐列表：', data);
                    self.professList = data.data.data.detail;
                }).catch((error) => {
                    console.error(error);
                });
            },
            editDetail(id) {
                var self = this;
                self.dialogFormVisible = true;
                self.form = self.tableData.filter(v => v.id == id)[0];
                console.info(self.form);
            },
            submitDetail() {

            },
            deleteDetail() {}
        }
    }
</script>
<style scoped>
    img {
        vertical-align: middle;
    }

    input,
    select {
        width: 160px;
        height: 30px;
        border: none;
        border-bottom: 1px solid #999;
        border-radius: 3px;
        text-indent: 9px;
        outline: none;
        margin-right: 20px;
    }

    .profess-List {
        width: 100%;
        text-align: center;
        color: #666;
        font-size: 14px;
        border: 1px solid #5e87b0;
        border-radius: 5px;
    }

    .profess-List li {
        min-height: 50px;
        line-height: 50px;
    }

    .profess-List .profess-List-title {
        display: flex;
        align-items: center;
        padding: 0 15px;
        background-color: #5E87B0;
        color: #FFFFFF;
        border: 1px solid #5e87b0;
    }

    .profess-List .profess-List-box {
        width: 100%;
        /* display: flex; */
    }

    .profess-List .profess-List-box>ul {
        flex: 1;
        display: flex;
        /* flex-direction: column; */
    }

    .profess-List .profess-List-box>ul>li {
        border-left: 0.5px solid #e5e5e5;
        border-bottom: 0.5px solid #e5e5e5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
        flex:1;
    }
</style>
